<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCommentApi } from '@/api/comment/index'
import { useAttractionApi } from '@/api/attraction'

// 状态管理
const commentApi = useCommentApi()
const attractionApi = useAttractionApi()
const state = reactive({
  loading: false,
  attractionData: [],
  pageIndex: 1,
  pageSize: 6,
  page: {
    records: [],
    total: 0
  },
  searchParams: {
    attractionId: '',
    status: '',
    content: ''
  },
  selectionIds: []
})

// 获取景点数据
const getAttractionData = async () => {
  state.attractionData = await attractionApi.getList()
}

// 获取表格数据
const getTableData = async (current = 1) => {
  try {
    state.loading = true
    state.pageIndex = current
    const params = { pageIndex: state.pageIndex, pageSize: state.pageSize }
    state.page = await commentApi.getPage(params, state.searchParams)
  } finally {
    state.loading = false
  }
}

// 处理分页大小改变
const handleSizeChange = async (val) => {
  state.pageSize = val
  await getTableData()
}

// 处理复选框选中
const handleSelectionChange = (rows) => {
  state.selectionIds = rows.map((v) => v.id)
}

// 重置搜索添加
const resetSearch = () => {
  state.searchParams = {
    attractionId: '',
    status: '',
    content: ''
  }
  getTableData()
}

// 处理删除
const handleRemove = (ids) => {
  ElMessageBox.confirm('确认要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await commentApi.remove(ids)
    ElMessage.success('删除成功')
    await getTableData()
  })
}

// 处理审核
const handleApprove = async (ids, status) => {
  let text = status === 'APPROVED' ? '通过' : '不通过'
  ElMessageBox.confirm(`确认标记为${text}吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await commentApi.approveComment({ ids, status: status })
    ElMessage.success('操作成功')
    await getTableData()
  })
}

// 初始化加载评论
onMounted(async () => {
  await getTableData()
  await getAttractionData()
})
</script>

<template>
  <el-card>
    <el-form :model="state.searchParams" :inline="true">
      <el-row>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="景点" prop="attractionId">
            <el-select
              v-model="state.searchParams.attractionId"
              placeholder="请选择景点"
              style="width: 190px"
              clearable
            >
              <el-option v-for="item in state.attractionData" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="评论内容" prop="content">
            <el-input v-model="state.searchParams.content" placeholder="请输入评论内容" clearable />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="评论状态" prop="status">
            <el-select v-model="state.searchParams.status" clearable placeholder="请选择评论状态" style="width: 190px">
              <el-option :value="0" label="启用" />
              <el-option :value="1" label="禁用" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item>
            <el-button type="primary" icon="search" @click="getTableData()"> 搜索 </el-button>
            <el-button icon="refresh" @click="resetSearch"> 清空 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row>
      <el-button
        v-auth="'comment:delete'"
        type="danger"
        icon="delete"
        @click="handleRemove(state.selectionIds)"
        :disabled="state.selectionIds.length < 1"
        >批量删除</el-button
      >
      <el-button
        v-auth="'comment:approve'"
        type="success"
        icon="check"
        @click="handleApprove(state.selectionIds, 'APPROVED')"
        :disabled="state.selectionIds.length < 1"
        >批量通过</el-button
      >
      <el-button
        v-auth="'comment:approve'"
        type="danger"
        icon="close"
        @click="handleApprove(state.selectionIds, 'REJECTED')"
        :disabled="state.selectionIds.length < 1"
        >批量不通过</el-button
      >
    </el-row>

    <el-table
      class="mt10"
      :loading="state.loading"
      element-loading-text="正在努力加载数据中..."
      :data="state.page.records"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" fixed="left" width="55" />
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="username" label="评论人账号" min-width="120" />
      <el-table-column prop="attractionName" label="景点名称" min-width="120" />
      <el-table-column prop="content" label="评论内容" min-width="120" />
      <el-table-column prop="status" label="状态" min-width="120">
        <template #default="{ row }">
          <el-tag type="warning" v-if="row.status === 'PENDING'" effect="plain">待定</el-tag>
          <el-tag type="success" v-if="row.status === 'APPROVED'" effect="plain">通过</el-tag>
          <el-tag type="danger" v-if="row.status === 'REJECTED'" effect="plain">不通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="评论时间" min-width="120" sortable show-overflow-tooltip />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-link
            v-auth="'comment:approve'"
            v-if="row.status === 'PENDING'"
            icon="check"
            type="success"
            @click="handleApprove([row.id], 'APPROVED')"
            >通过
          </el-link>
          <el-divider v-auth="'comment:approve'" v-if="row.status === 'PENDING'" direction="vertical" />
          <el-link
            v-auth="'comment:approve'"
            v-if="row.status === 'PENDING'"
            icon="close"
            type="danger"
            @click="handleApprove([row.id], 'REJECTED')"
            >不通过
          </el-link>
          <el-divider v-auth="'comment:delete'" direction="vertical" />
          <el-link v-auth="'comment:delete'" type="danger" icon="remove" @click="handleRemove([row.id])">删除 </el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="mt10"
      :current-page="state.page.current"
      :page-size="state.page.size"
      :total="state.page.total"
      :page-sizes="[1, 3, 6, 9, 12, 15, 18]"
      layout="total, sizes, ->, prev, pager, next, jumper"
      background
      @current-change="getTableData"
      @size-change="handleSizeChange"
    />
  </el-card>
</template>
